<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <style>

        * {
            margin: 0;     padding: 0;     list-style: none;     box-sizing: border-box;   -webkit-appearance: none;
        }
        button{
            border: none;
            background: none;
        }
        :root {
            --font-color-1: #dbdbdb;
            --font-color-2: #4c4e4d;
            --font-color-3: #ababae;
            --bg-color: #232222;
        }
        body{
            background-color: var(--bg-color);
            color: var(--font-color-1);
        }
    </style>
</head>
<body>

<br><br><br><br>

<div>

    <button onclick="delete_this_slang()" style="background:#b11313; font-size: 26px; padding: 5px;">delete</button>
    <button onclick="level_300()" style="background:#186825; font-size: 26px; padding: 5px; float: right">level = 300</button>
    <br><br>

    <span   th:each="item, iterStat : ${all_user}"  style="font-size: 32px;">
<!--        <span th:text="${iterStat.index}"></span> - -->
    </span>

    <!--
        color     #dbdbdb   #4c4e4d
        background   #232222

    --B8-t: #e2e2e6;
    --B7-t: #c6c6ca;
    --B6-t: #ababae;
    --B5-t: #77777a;
    --B4-t: #5e5e61;
    --B3-t: #424245;
    --B2-t: #39393c;
    --B1-t: #28282a;
    --B0-t: #1f1f22;
    -->

    <div    style="font-size: 28px;">
        <div style="display: flex; ">
            <div id="id"  style="font-size: 12px; ">    </div>
            <div style="width: 30px; height: 30px;  background:green; display: none;" id="status"></div>
        </div>
        <div id="english"  style=" font-weight: bolder;  font-size: xx-large; ">    </div>
        <div style="height: 36px;">
            <div id="chinese"  style="display: none;   font-size: xx-large;   ">  </div>
        </div>

        <div style="position: fixed; width: 100%;  bottom: 5px; ">
            <div style="display: flex;">
                <button onclick="change_index(-1)" style="background:#32403e;width: 50%; height: 100px; font-size: 28px;">previous</button>
                <button onclick="change_index(1)" style="background:#32403e;width: 50%; height: 100px; font-size: 28px;" >next</button>
            </div>
            <button onclick="show()"   style="background:#32403e; width: 100%; height: 100px; font-size: 28px;margin-top: 2px; " >show</button>
        </div>


    </div>


</div>
<br><br><br><br><br><br>
<button onclick="get_count_all()" style="background:#1e6e77; font-size: 26px; padding: 5px; float: right">get_count_all</button>
</body>
<!--<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.4/vue.js" type="application/javascript"></script>-->
<script th:inline="javascript">
    var results___ = [[${all_user}]];
    console.log(results___);
    console.log(results___.length);
    var slang_index = -1;

    function change_index(num){
        slang_index = slang_index + num;
        try {
            document.getElementById("id").innerText = results___[slang_index].id;
            document.getElementById("english").innerText = results___[slang_index].english;
            document.getElementById("chinese").innerText = results___[slang_index].chinese;
        }catch (error) {
            alert(error)
        }
    }
    function show() {
        document.getElementById("chinese").style.display = "block";
        setTimeout(() => {
            document.getElementById("chinese").style.display = "none";
        }, 266);
    }
    function delete_this_slang(){
        let url="/delete/delete_this_slang";
        let method='POST';
        let id = document.getElementById("id").innerText;
        // let method='GET';
        let postObj = {
            id: id,
        };
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
        xhr.send(JSON.stringify(postObj));
        xhr.onload = function () {
            if (xhr.status===200){
                if (xhr.responseText === 'success') {
                    document.getElementById("status").style.display = "block";
                    setTimeout(() => {
                        document.getElementById("status").style.display = "none";
                    }, 666);
                }
            }
        }
    }




    function level_300(){
        let url="/level/level_300";
        let method='POST';
        let id = document.getElementById("id").innerText;
        // let method='GET';
        let postObj = {
            id: id,
        };
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
        xhr.send(JSON.stringify(postObj));
        xhr.onload = function () {
            if (xhr.status===200){
                if (xhr.responseText === 'success') {
                    document.getElementById("status").style.display = "block";
                    setTimeout(() => {
                        document.getElementById("status").style.display = "none";
                    }, 666);
                }
            }
        }
    }



    function get_count_all(){
        let url="/count/all";
        let method='POST';
        let id = document.getElementById("id").innerText;
        // let method='GET';
        let postObj = {
            id: id,
        };
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
        xhr.send(JSON.stringify(postObj));
        xhr.onload = function () {
            if (xhr.status===200){
                alert(xhr.responseText);
            }
        }
    }






    //  禁止双击缩放
    window.onload=function () {
        document.addEventListener('touchstart',function (event) {
            if(event.touches.length>1){
                event.preventDefault();
            }
        })
        var lastTouchEnd=0;
        document.addEventListener('touchend',function (event) {
            var now=(new Date()).getTime();
            if(now-lastTouchEnd<=300){
                event.preventDefault();
            }
            lastTouchEnd=now;
        },false)
    }
</script>
</html>